import * as echarts from '../node_modules/echarts/dist/echarts.esm.js';


let myChart1 = echarts.init(document.getElementById('mychart1'));

myChart1.setOption({

    title: {
        text: 'legend组件',
        top:'0%',
        z:1,
        backgroundColor:'yellow',
    },
    //legend是图例,跟series是一一对应的,一个系列中的所有数据组成一个图例
    //图例就是为了展示系列的,在legend中的data中配置了图例之后可以控制该图例对应系列的数据的展示与否
    legend: {  //图例组件,所有图例相关参数都在这里进行配置
        id:'1', //图例的id,可以用来在其他组件中引用这个图例
        show:true,//显示图例,true显示,false不显示
        // data: ['销量', '销售额'], //默认情况下需要和series中的每一个系列name一一对应,没有给data,但是series中有name的话也可以显示
        type:'plain',//图例类型,plain普通图例,scroll可以滚动翻页的图例,当系列数量过多的时候可以使用 
        z:10, //在同一canvas中,z越大越靠上,默认0,越大越靠上,可以通过设置背景颜色看到这个效果
        backgroundColor:'red',//设置图例的背景颜色,只负责给图例内容（item）画背景，而不是给整个 width × height 的矩形区域画背景。
        // left:'35%',//设置图例的左边界,默认auto,可选值:left,center,right,20%表示距离左边的距离为20%
        // right:'0',//设置图例的右边界,默认auto,可选值:left,center,right,20%表示距离右边的距离为20%
        top:'0%', //设置图例的上边界,默认auto,可选值:top,center,bottom,0%表示距离上边的距离为0%
        orient: 'horizontal',//设置图例的排列方向,默认horizontal,可选值:horizontal,vertical
        width:'90%',//设置图例的宽度(这是最大宽度限制,不是强制宽度!如果内容宽度小于width,图例会按内容宽度显示;如果内容宽度大于width,才会被限制为width的值),默认auto,可选值:width,height,100%表示宽度为100%,但是背景色只会显示实际的宽度
        // height: '200px',//设置图例的高度,默认auto,可选值:width,height,100%表示高度为100%
        align:'right',//设置图例的对齐方式,默认center,可选值:left,center,right,控制图标在文字的左边还是右边
        itemGap:20,//设置图例中每个图例项之间的间距,默认10
        itemWidth:25,//图例图形宽度(不是文字)
        itemHeight:25,//图例图形高度(不是文字)
        padding:[0,150,0,150],//设置图例的内边距,默认不设置,可选值:top,bottom,left,right,top-left,top-right,bottom-left,bottom-right
        textStyle:{ //设置图例文字的样式
            color:'green',
            fontSize:14,
            fontWeight:'bold',
            fontFamily:'SimSun, sans-serif',
            fontStyle:'normal',
            fontWeight:'normal',
            fontFamily:'SimSun, sans-serif',
            textBorderStyle:'dashed', //设置虚线
            textBorderWidth:2, //设置虚线宽度
            textBorderColor:'blue', //设置虚线颜色
            textBorderDashOffset:6, //设置虚线偏移量,但是对文字基本上没什么效果
        },
        itemStyle:{//设置图例中每个图例项的样式,包括颜色和边框以及透明度等等(图形而不是文字)
            color:'blue', //设置图例项的颜色
            borderColor:'black', //设置图例项的边框颜色
            borderWidth:2, //设置图例项的边框宽度
            borderRadius:10, //设置图例项的边框圆角
            borderStyle:'solid', //设置图例项的边框样式
            opacity:0.5, //设置图例项的透明度,默认1,可选值:0-1
        },
        lineStyle:{//设置图例中每个图例项图形中的线条样式
            color:'blue', //设置图例项的线条颜色
            width:5, //设置图例项的线条宽度
            type:[2,4], //设置图例项的线条样式
            opacity:1, //设置图例项的透明度,默认1,可选值:0-1
            dashOffset:0, //设置图例项的线条虚线偏移量
        },

    },
    xAxis: { // 配置X轴
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {// 配置y轴
    },
    series: [ 
        {
            name: '销量', //这里是用来在图例中显示,只要配置了这个name,即使legend中并配置data也可以展示
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130]
        },
        {
            name: '销售额',
            type: 'line',
            data: [80, 60, 70, 140, 150, 160, 170]
        },
        {
            name: '销售额1',
            type: 'line',
            data: [80, 60, 70, 140, 150, 160, 170]
        },
        {
            name: '销售额2',
            type: 'line',
            data: [80, 60, 70, 140, 150, 160, 170]
        },
        {
            name: '销售额3',
            type: 'line',
            data: [80, 60, 70, 140, 150, 160, 170]
        },
        {
            name: '销售额4',
            type: 'line',
            data: [80, 60, 70, 140, 150, 160, 170]
        },
        {
            name: '销售额5',
            type: 'line',
            data: [80, 60, 70, 140, 150, 160, 170]
        },
        {
            name: '销售额6',
            type: 'line',
            data: [80, 60, 70, 140, 150, 160, 170]
        },
        {
            name: '销售额7',
            type: 'line',
            data: [80, 60, 70, 140, 150, 160, 170]
        },
        {
            name: '销售额8',
            type: 'line',
            data: [80, 60, 70, 140, 150, 160, 170]
        },
        {
            name: '销售额9',
            type: 'line',
            data: [80, 60, 70, 140, 150, 160, 170]
        },
        {
            name: '销售额6',
            type: 'line',
            data: [80, 60, 70, 140, 150, 160, 170]
        },
    ]
});



//虚线动画效果,使用虚线偏移量来完成
let offset = 0;
setInterval(() => {
  offset++;
  myChart1.setOption({
    legend: { lineStyle: { dashOffset: offset } }
  });
}, 20);